<template>
  <div>
    <DocHeader :title="data.title" fromDoc="preventAspiration" />
    <div class="docMain">
      尊敬的患者：<br />
      根据您目前的疾病程度、用药情况及身体状况等，我们参照《患者误吸风险评估表》进行了评估，您属于误吸高风险人群、特给于告知，希望得到您的配合以防止误吸事件的发生。请您在住院期间注意以下几点：<br />
      1、病情允许时进食体位为坐位或半坐卧位，肠内营养患者抬高床头至30-45度。<br />
      2、进食速度宜慢，让您留有足够的时间咀嚼及吞咽食物，一口量不宜过大，选用小勺进餐。进餐后保持坐位30-60分钟。<br />
      3、选择易吞咽、密度均匀、有适当黏性、不易松散的食物，尽量避免食用汤汤水水及不易吞咽的干食(如馒头、青团、馄饨等)。<br />
      4、选择恰当的食具，小心使用吸管，必要时使用细勺代替吸管。<br />
      5、进食时确保注意力集中，禁止进餐时说话、大笑、看电视等。<br />
      6、如您在喝水或进食时出现呛咳或吞咽困难等现象，请立即停止进食，寻求护士及医生帮助。<br />
      7、如您近日频繁呕吐，呕吐时头偏一侧，及时清理口腔及呼吸道分泌物，勿在呕吐间歇时进食，减少误吸发生。<br />
      8、如您使用肠内营养，请勿自行经口进食或鼻饲，一切操作均由护士执行。
    </div>
    <div class="flexBox">
      <div class="item">患者（家属）签名：</div>
      <div class="item">与患者的关系：</div>
    </div>
    <div class="flexBox">
      <div class="item">
        护士签名：
        <img
          v-if="signPhoto(sign, 'nursingDocument', data.type)"
          :src="
            'data:image/png;base64,' +
            signPhoto(sign, 'nursingDocument', data.type)
          "
          alt=""
          style="display: block; max-width: 98%; height: 24px"
          @click="handleSignImgClear"
        />
        <el-input
          v-else
          v-model="sign"
          style="width: 100px"
          @blur="handleSignInputBlur"
        ></el-input>
      </div>
      <div class="item">
        告知时间：
        <DateSelection
          v-model="time"
          value-format="yyyy-MM-dd HH:mm"
          :simple-op="true"
          :date-picker-show="true"
          :date-show="true"
          :no-clear="true"
          :hasBorder="false"
          :needTimeIcon="false"
          :display-num="!time"
          style="padding: 0"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, reactive, toRefs, watch } from 'vue'

import DateSelection from '@/components/DateSelection/indexV2.vue'
import { useSign } from '@/hooks'
import { getStoreFromInstance } from '@/utils/instance'

import DocHeader from '../DocHeader.vue'

export default defineComponent({
  components: {
    DocHeader,
    DateSelection
  },
  props: {
    patCur: {
      type: Object,
      default: () => ({})
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const state = reactive({
      hospitalName: window.hospitalName,
      sign: '',
      time: +new Date()
    })
    const store = getStoreFromInstance()

    const { signPhoto, queryUserSignByName } = useSign()

    const user = computed(() => store.getters.user)

    function handleSignInputBlur() {
      queryUserSignByName([state.sign], 'nursingDocument', props.data.type)
    }

    function handleSignImgClear() {
      state.sign = ''
    }

    watch(
      user,
      val => {
        if (val) {
          queryUserSignByName([val.name], 'nursingDocument', props.data.type)
          state.sign = val.name
        }
      },
      {
        immediate: true
      }
    )
    return {
      ...toRefs(state),
      signPhoto,
      handleSignInputBlur,
      handleSignImgClear
    }
  }
})
</script>

<style lang="scss" scoped>
.docMain {
  line-height: 2em;
  margin-top: 10px;
  margin-bottom: 100px;
}

.textIndent2 {
  text-indent: 2em;
}

.flexBox {
  display: flex;
  margin-top: 60px;

  .item {
    width: 50%;
    display: flex;
    align-items: center;
  }
}

::v-deep {
  .el-input .el-input__inner {
    border: none;
    border-radius: 0;
    text-align: left;
    // border-bottom: 1px solid #000;
    padding: 0 4px;
    color: #000;
  }
}
</style>
